<template>
    <div class="calendar">
        <h2>校历</h2>
        <div class="search mb-20">
            <Input
                style="width:20%"
                v-model.trim="keyword"
                search
                clearable
                enter-button
                @enter="searchList"
                @on-search="searchList"
                placeholder="搜索用户名、工号、姓名"
            />
        </div>
        <div class="bt-opera mb-10">
            <Button class="cb-icon" icon="md-add" @click="showCalerdar(false)">新增</Button>
            <!--删除 -->
            <delete-data-btn @on-click="handelerBtn"></delete-data-btn>
        </div>
        <!--loading公共属性 -->
        <Table
            border
            ref="selection"
            :loading="loading"
            size="small"
            :columns="columns"
            :data="tableData"
        >
            <template slot-scope="{ row }" slot="code">
                <span>{{ row.code }}</span>
            </template>
            <template slot-scope="{ row }" slot="name">
                <span>{{ row.name }}</span>
            </template>
            <template slot-scope="{ row }" slot="semesterYear">
                <span>{{ row.semesterYear }}</span>
            </template>
            <template slot-scope="{ row }" slot="semesterNumber">
                <span>{{ row.semesterNumber }}</span>
            </template>
            <template slot-scope="{ row }" slot="weeks">
                <span>{{ row.weeks }}</span>
            </template>
            <template slot-scope="{ row }" slot="range">
                <span>{{ row.dateStart }} ~ {{ row.dateEnd }}</span>
            </template>
            <template slot-scope="{ row }" slot="deal">
                <div class="hasSplitLast">
                    <span @click="showCalerdar(true, row)">编辑</span> |
                    <span @click="toDetail(row)">查看详情</span> |
                    <span @click="showDelModal(row.id)">删除</span> |
                    <span @click="toDetailModal(row)">弹窗详情</span>
                </div>
            </template>
        </Table>
        <div class="pagination mt-10">
            <Page
                :total="totalSize"
                :current="calendar.pageNumber"
                @on-change="pageNumChange"
                @on-page-size-change="pageSizeChange"
                show-total
                show-sizer
                show-elevator
            />
        </div>
        <!--新增 -->
        <AddCalendar
            v-model="calenderModal"
            :rowData="rowData"
            :edit.sync="edit"
            @on-update="getList"
        ></AddCalendar>
        <!--选择删除 -->
        <ChooseModal
            v-model="chooseModelVisible"
            @confirm="deleteConfirm"
            :title="chooseTitle"
        ></ChooseModal>
        <BaseModal
            v-model="showModal"
            title="确认删除"
            width="350"
            type="warning"
            ok-type="error"
            @on-ok="delData"
            @on-cancel="showModal = false"
            simple="true"
            >此数据将被删除，确认操作吗？</BaseModal
        >
        <!--表格弹框展示 -->
        <BaseModal
            v-model="showDetailModal"
            title="详情"
            @on-ok="showDetailModal = false"
            @on-cancel="showDetailModal = false"
        >
            <BaseTable :value="detailData" :row="1"></BaseTable>
        </BaseModal>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Group } from "@/model/group.ts"; //引入公共group方法
import { ParamData } from "@/store/interface.ts";
import { BASE64, chunk } from "@utils/tools.ts";
import { queryData, deleteData } from "@/api/service.js";
import AddCalendar from "@views/AddCalendar.vue";
import BaseModal from "@components/iv-modal/BaseModal.vue";
import DeleteDataBtn from "@components/iv-button/DeleteDataBtn.vue";
import BaseTable from "@components/iv-table/BaseTable.vue";
import ChooseModal from "@components/iv-choose/ChooseModal.vue";
import { Tools } from "@/model/tools";

@Component({
    components: {
        AddCalendar,
        BaseModal,
        BaseTable,
        DeleteDataBtn,
        ChooseModal
    }
})
export default class DataCalendar extends Tools {
    private calenderModal: boolean = false;
    private totalSize: number = 0;
    private keyword: string = "";
    private rowData: Object = {};
    private edit: boolean = false; // 新增 or 编辑
    private showModal: boolean = false;
    private showDetailModal: boolean = false; // 弹窗详情
    private detailData: Array<any> = []; // 弹框详情
    private id: number = 0;
    private loading: boolean = true;
    private type: string = "schoolCalendar"; //公共类型
    private chooseModelVisible: boolean = false;
    private selectedRowIds: Array<any> = []; //勾选ids
    // 请求参数封装对象
    private calendar: ParamData = {
        type: this.type,
        criteria: "",
        includeAttributes: [],
        pageNumber: 1,
        pageSize: 10
    };
    private tableData: Array<any> = [];
    private columns: Array<any> = [
        {
            type: "selection",
            width: 60,
            align: "center"
        },
        {
            title: "代码",
            slot: "code"
        },
        {
            title: "名称",
            slot: "name"
        },
        {
            title: "学年",
            slot: "semesterYear"
        },
        {
            title: "学期",
            slot: "semesterNumber"
        },
        {
            title: "周数（周）",
            slot: "weeks"
        },
        {
            title: "开始结束日期",
            slot: "range"
        },
        {
            title: "操作",
            slot: "deal",
            align: "center"
        }
    ];

    /**
     * 弹出层
     */
    showCalerdar(isEdite, row) {
        this.calenderModal = true;
        this.rowData = row || {};
        this.edit = isEdite;
    }
    async getList() {
        let [err, data] = await queryData(this.calendar);
        this.loading = false;
        if (err) {
            let msg = err.msg || "获取列表数据信息异常";
            this.$Message.error(msg);
            return;
        }
        this.totalSize = data.totalSize;
        this.tableData = data.rows;
    }
    searchList() {
        let keyword = BASE64.encode(JSON.stringify([["name", "ilike", this.keyword]]));
        this.calendar.criteria = keyword; //模糊查询
        this.getList();
    }
    pageNumChange(num) {
        this.calendar.pageNumber = num;
        this.getList();
    }
    pageSizeChange(num) {
        this.calendar.pageSize = num;
        this.getList();
    }
    /**
     * 详情
     */
    toDetail(row) {
        this.$router.push({
            name: "viewCalendar",
            params: row
        });
    }
    /**
     * 弹框详情
     */
    toDetailModal(row) {
        this.showDetailModal = true;
        const {
            code,
            name,
            semesterYear,
            semesterNumber,
            weeks,
            dateStart,
            dateEnd,
            dateStartTeaching,
            dateEndTeaching,
            dateCheckinStaff,
            dateCheckinStudent
        } = row;

        this.detailData = [
            { name: "编码", value: code },
            { name: "名称", value: name },
            { name: "学年", value: semesterYear },
            { name: "学期", value: semesterNumber },
            { name: "周数", value: weeks },
            { name: "开始日期", value: dateStart },
            { name: "结束日期", value: dateEnd },
            { name: "教学开始日期", value: dateStartTeaching },
            { name: "教学结束日期", value: dateEndTeaching },
            { name: "教师报到日期", value: dateCheckinStaff },
            { name: "学生报到日期", value: dateCheckinStudent }
        ];
    }

    private showDelModal(id) {
        this.showModal = true;
        this.id = id;
    }

    private handelerBtn() {
        this.chooseModelVisible = true;
    }

    private deleteConfirm() {
        if (this.selectedRowIds.length === 1) {
            this.$Message.error("请选择至少一条数据项");
            return;
        }
        //删除方法
        this.deleteData();
    }

    /**
     * 关闭弹窗
     */
    public closeChooseModal() {
        this.chooseModelVisible = false;
    }

    private get chooseTitle() {
        return "请选择删除的对象";
    }

    public get deleteParams() {
        return {
            type: "schoolCalendar",
            ids: this.selectedRowIds
        };
    }

    public async deleteData() {
        const [err, data] = await deleteData(this.deleteParams);
        this.closeChooseModal();
        if (err) {
            let msg = err.message || "删除勾选数据异常";
            this.$Message.error(msg);
            return;
        }
        this.$Message.success("删除成功");
        //this.getList();
    }
    /**
     * 删除
     */
    async delData() {
        let params = {
            ids: [this.id],
            type: this.type
        };
        const [err, data] = await deleteData(params);
        this.commLoading(false);
        if (err) {
            let msg = err.message || "删除信息异常";
            this.$Message.error(msg);
            return;
        }
        this.showModal = false;
        this.$Message.success("删除成功");
        this.getList();
    }
    mounted() {
        this.getList();
    }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.calendar {
  .bt-opera {
    display: flex
    justify-content: space-between
  }
  >>>.ivu-input-icon-clear {
    margin-right: 50px
  }
}
</style>
